<template>
  <div class="user-count">
    <div class="icon">
      <i class="el-icon-user-solid"></i>
    </div>
    <div class="text">
      <span>{{ usertotal }}</span>
      <p class="title">系统用户数</p>
    </div>
  </div>
</template>
  
  <script>
export default {
    data(){
        return{
            usertotal:""
        }

    },
  methods: {
    async getUsersData() {
      try {
        const { data: res } = await this.axios.get(
          "users/getUsersData?currPage=0&pageNum=4"
        );
        // console.log(res);
        this.usertotal = res.total;
      } catch (error) {
        console.error(error);
        this.$message.error("请求失败: " + error.message);
      }
    },
  },
  mounted() {
    this.getUsersData();
  },
};
</script>
  
  <style lang="scss" scoped>
.user-count {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  justify-content: space-between; /* 图标和文本分别位于两侧 */
  font-family: "Noto Sans SC";
  padding: 0 60px 0 30px; /* 左右各留 20px 空白 */
  width: 100%; /* 确保容器占满父容器的宽度 */
  box-sizing: border-box;

  .icon {
    .el-icon-user-solid {
      font-size: 66px;
      color: rgb(56, 154, 249);
    }
  }

  .text {
    display: flex;
    flex-direction: column; /* 文本部分垂直排列 */
    justify-content: center; /* 垂直居中对齐 */

    span {
      font-size: 32px;
      font-weight: bold;
    }

    .title {
      font-size: 14px;
      color: #666; /* 标题颜色可以根据需要调整 */
    }
  }
}
</style>